<template>
  <div>
    <div>
      <label for="">姓名:</label>
      <Input type="text" v-model="searchData.realname" style="width: 150px;" clearable />
      <label for="">手机号:</label>
      <Input type="text" v-model="searchData.mobile" style="width: 150px;" clearable />
      <label for="">角色:</label>
      <Select v-model="searchData.role_id" style="width: 150px;" clearable>
        <Option v-for="item in roleList" :value="item.id" :key="item.id">{{ item.role_name }}</Option>
      </Select>
      <Button type="primary" @click="search()" style="margin-left: 10px">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
      <Button @click="editUser(false)" type="info" style="margin-left: 10px">添加账号</Button>
    </div>

    <div style="margin-top: 10px;">
      <Table :columns="columns" :data="list" @on-sort-change="customSort" @on-select="rowSelect"
        @on-select-all="allSelect" @on-select-cancel="rowSelectCancel" size="small" :highlight-row="true" max-height="800"
        border stripe>
        <template slot-scope="{ row, index }" slot="createTimeSlot">
          <Tooltip :content="row.reg_location" placement="top">
            <span>{{ row.create_time }}</span>
          </Tooltip>
        </template>
        <template slot-scope="{ row, index }" slot="regSlot">
          <Tooltip :content="row.location" placement="top">
            <span>{{ row.last_login_time }}</span>
          </Tooltip>
        </template>
        <template slot-scope="{ row, index }" slot="statusSlot">
          <i-switch :value="!!row.status" @on-change="statusChange(row.user_id, !row.status)" />
        </template>
        <template slot-scope="{ row, index }" slot="makeSlot">
          <!-- <Tooltip content="好友列表" style="margin-left: 10px" placement="top">
            <Icon type="ios-contacts-outline" size="24" color="#19be6b" style="cursor: pointer"
              @click="showFriend(row.user_id)" />
          </Tooltip> -->
          <Tooltip content="编辑" style="margin-left: 10px" placement="top">
            <Icon type="md-color-filter" size="24" color="#2d8cf0" style="cursor: pointer" @click="editUser(row)" />
          </Tooltip>
          <Tooltip content="删除" style="margin-left: 10px" placement="top">
            <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer" @click.stop="del(row.user_id)" />
          </Tooltip>
        </template>
      </Table>
      <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
      </Paginate>
    </div>



    <!-- 编辑 -->
    <Modal v-model="editUserModal" title="用户信息" @on-ok="editUserModalOk">
      <Form :model="formUserItem" :label-width="80">
        <FormItem label="姓名">
          <Input v-model="formUserItem.realname"></Input>
        </FormItem>
        <FormItem label="用户头像">
          <Upload ref="upload" name="image" :headers="header" :action="action_url" :show-upload-list="false"
            :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
            <Button icon="ios-cloud-upload-outline">点击上传</Button>
          </Upload>
        </FormItem>
        <FormItem class="item">
          <img :src="imgUrl" style="width: 100px; height: 100px" v-show="imgUrl != ''" />
        </FormItem>
        <FormItem label="手机号" v-if="formUserItem.user_id == 0">
          <Input v-model="formUserItem.mobile"></Input>
        </FormItem>
        <FormItem label="登录密码">
          <Input v-model="formUserItem.password"></Input>
        </FormItem>
        <!-- <FormItem label="性别">
          <RadioGroup v-model="formUserItem.sex">
            <Radio label="2" border>未知</Radio>
            <Radio label="0" border>女</Radio>
            <Radio label="1" border>男</Radio>
          </RadioGroup>
        </FormItem> -->
        <FormItem label="角色">
          <Select v-model="formUserItem.role_id">
            <Option v-for="item in roleList" :value="item.id" :key="item.id">{{
              item.role_name
            }}</Option>
          </Select>
        </FormItem>
        <FormItem label="所属部门">
          <Select v-model="formUserItem.department_id">
            <Option value="0">请选择</Option>
            <Option v-for="item in departmentList" :value="item.id" :key="item.id">{{ item.name }}</Option>
          </Select>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="formUserItem.status">
            <Radio label="1" border>正常</Radio>
            <Radio label="0" border>禁用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="加群" v-if="formUserItem.role_id == 3">
          <RadioGroup v-model="formUserItem.join_group">
            <Radio label="1" border>是</Radio>
            <Radio label="0" border>否</Radio>
          </RadioGroup>
        </FormItem>
        <!-- <FormItem label="备注">
          <Input v-model="formUserItem.remark" type="textarea"></Input>
        </FormItem> -->
      </Form>
    </Modal>

    <!-- 好友列表 -->
    <Modal v-model="showFriendModal" title="好友列表" :width="60">
      <Table :columns="friendColumns" :data="friendList" size="small" :highlight-row="true" max-height="800" border
        stripe>
        <!-- <template slot-scope="{ row , index}" slot="makeSlot">
          <Tooltip content="好友列表" style="margin-left: 10px;" placement="top">
            <Icon type="ios-paper-outline" size="24" color="#19be6b" style="cursor: pointer;"
              @click="showFriend(row.id)" />
          </Tooltip>
        </template> -->
      </Table>
      <Paginate :total="friendTotal" @on-change="changePage1" @on-page-size-change="changeSize1">
      </Paginate>
    </Modal>
  </div>
</template>

<script>
import Paginate from "@/components/paginate/paginate.vue";
import { getToken } from "../../libs/util";
import config from "@/config";
const baseUrl =
  process.env.NODE_ENV === "development"
    ? config.baseUrl.dev
    : config.baseUrl.pro;
export default {
  name: "userList",
  components: {
    Paginate,
  },
  data() {
    return {
      searchData: {
        sort: "desc",
        order_by: "user_id",
        role_id: "",
        page: 1,
        limit: 10,
      },
      // 列表
      columns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center'
        // },
        {
          title: "ID",
          align: "center",
          key: "user_id",
          sortable: "custom",
        },
        {
          title: "姓名",
          align: "center",
          key: "realname",
          sortable: "custom",
        },
        {
          title: "手机号",
          align: "center",
          key: "mobile",
          sortable: "custom",
        },
        {
          title: "角色",
          align: "center",
          key: "role_name",
          sortable: "custom",
        },
        {
          title: "部门",
          align: "center",
          key: "department_name",
          sortable: "custom",
        },
        {
          title: "注册时间",
          align: "center",
          key: "create_time",
          sortable: "custom",
        },
        {
          title: "最后登录时间",
          align: "center",
          key: "last_login_time",
          sortable: "custom",
        },
        {
          title: "备注",
          key: "remark",
          align: "center",
          sortable: "custom",
        },
        // {
        //   title: '状态',
        //   key: 'status',
        //   align: 'center',
        //   sortable: 'custom',
        //   slot: "statusSlot",
        // },
        {
          title: "操作",
          align: "center",
          slot: "makeSlot",
        },
      ],
      // 数据
      list: [],
      total: 0,
      // 编辑框
      editModal: false,
      formItem: {
        coupon_id: 0,
      },
      editUserModal: false,
      action_url: baseUrl + "/admin/image/uploadImg",
      header: { Authorization: getToken() },
      imgUrl: "",
      formUserItem: {},
      roleList: [],
      // 好友列表
      searchData1: {
        user_id: 0,
      },
      showFriendModal: false,
      friendColumns: [
        {
          title: "好友ID",
          align: "center",
          key: "friend_user_id",
          sortable: "custom",
        },
        {
          title: "好友名称",
          align: "center",
          key: "friend_user_name",
          sortable: "custom",
        },
        {
          title: "好友备注",
          align: "center",
          key: "nickname",
          sortable: "custom",
        },
      ],
      friendTotal: 0,
      friendList: [],
      departmentList: [],
    };
  },
  methods: {
    // 查询管理员信息
    getList() {
      let params = {
        ...this.searchData,
      };
      this.$axios("/admin/user/getList", params).then((res) => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        sort: "desc",
        order_by: "user_id",
        role_id: "",
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    changePage1(page) {
      this.searchData1.page = page;
      this.getFriendList();
    },
    changeSize1(size) {
      this.searchData1.limit = size;
      this.getFriendList();
    },
    editModalOk() {
      let params = {
        ...this.formItem,
      };
      this.$axios("/admin/member/moveUser", params).then((res) => {
        this.$Message.success("执行成功");
        this.getList();
      });
    },
    getUserLevelArr() {
      this.$axios("/admin/member/getUserLevelArr").then((res) => {
        this.userLevelList = res;
      });
    },
    edit(row) {
      this.formItem.id = row.id;
      this.editModal = true;
    },
    editUser(row) {
      this.getdepartment();
      if (row) {
        this.formUserItem = { ...row };
        this.formUserItem.status = this.formUserItem.status + "";
        this.formUserItem.join_group = this.formUserItem.join_group + "";
        this.formUserItem.password = "";
        this.imgUrl = this.formUserItem.src;
      } else {
        this.formUserItem = {};
        this.formUserItem.user_id = 0;
        this.formUserItem.status = "1";
        this.formUserItem.join_group = "0";
      }

      this.editUserModal = true;
    },
    editUserModalOk() {
      this.$axios("/admin/user/add", this.formUserItem).then((res) => {
        this.$Message.success("执行成功");
        this.getList();
      });
    },
    del(id) {
      this.$Modal.confirm({
        title: "删除用户",
        content: "您确定要删除用户吗？",
        onOk: () => {
          this.$axios("/admin/user/del", { id: id }).then((res) => {
            this.$Message.success("执行成功");
            this.getList();
          });
        },
        onCancel: () => {
          this.$Message.info("取消操作");
        },
      });
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    rowSelect(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach((element) => {
        this.sendCouponUidArr.push(element.id);
      });
    },
    rowSelectCancel(selection, row) {
      this.sendType = 0;
      this.sendCouponUidArr = [];
      selection.forEach((element) => {
        this.sendCouponUidArr.push(element.id);
      });
    },
    allSelect() {
      this.sendType = 1;
    },
    handleSuccess(res, file) {
      this.formUserItem.avatar = res.data.src;
      this.imgUrl = res.data.url;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "不支持该文件类型",
      });
    },
    // 启用，禁用
    statusChange(id, status) {
      this.$axios("/admin/user/setUserStatus", { id: id, status: status }).then(
        (res) => {
          this.getList();
        }
      );
    },
    // 获取角色列表
    getRoleList() {
      this.$axios("/admin/role/getSelfAndNextRoleList").then((res) => {
        this.roleList = res;
      });
    },
    // 好友列表
    showFriend(id) {
      this.searchData1.user_id = id;
      this.getFriendList();
      this.showFriendModal = true;
    },
    getFriendList() {
      this.$axios("/admin/user/getUserFriendList", this.searchData1).then(
        (res) => {
          this.friendTotal = res.total;
          this.friendList = res.data;
        }
      );
    },
    // 获取部门列表
    getdepartment() {
      this.$axios("/admin/department/getDepartmentArr").then((data) => {
        this.departmentList = data;
      });
    },
  },
  created() {
    this.getList();
    this.getRoleList();
  },
};
</script>
<style></style>
